<template>
  <div class="header">
    <div class="user-info">
      <p><strong>姓名:</strong> {{ form.name }}</p>
      <p><strong>性别:</strong> {{ form.gender }}</p>
      <p><strong>年龄:</strong> {{ form.age }}</p>
    </div>
    <el-button type="danger" @click="handleLogout">退出登录</el-button>
    <el-button type="primary" @click="toggleTheme">切换主题</el-button>
  </div>
</template>
  
<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();
const form = reactive({
  name: '张三',
  gender: '男',
  age: '30',
});

const theme = ref('light'); // 默认主题为 light

const handleLogout = () => {
  ElMessage.success('退出成功，即将返回登录页');
  setTimeout(() => {
    localStorage.removeItem('token');
    router.push('/login');
  }, 500);
};

const toggleTheme = () => {
  const colours = ['light', 'dark', 'purple', 'red'];
  const randomIndex = Math.floor(Math.random() * colours.length);
  theme.value = colours[randomIndex];
  document.documentElement.setAttribute('data-theme', theme.value);
};
</script>
  
  <style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: var(--background-color);
  border-bottom: 1px solid #dee2e6;
  color: var(--text-color);
}

.user-info {
  display: flex;
  gap: 20px;
}

.user-info p {
  margin: 0;
}

.el-button {
  margin-left: auto;
}
  </style>